<template>
  <div>
    <div class="music-list-container">
      <!-- 标题 -->
      <!-- <Title :title="title" :url="'/index/more/'+title+'/'+type"></Title> -->
      <Title :title="title" :url="{name:'moreMuisc',params:{title:title,type:type}}">
        <!-- <div>放在标题前面</div>
        <div slot="back">放在标题后面</div>-->
      </Title>
      <!-- 音乐列表 -->
      <van-row class="music-list" gutter="10">
        <van-col class="music-col" v-for="item in list" span="8" :key="item.song_id">
          <router-link tag="div" :to="{name:'musicPlay',params:{songId:item.song_id}}">
            <img v-lazy="item.pic_small" class="music-cover" alt="图片封面" />
            <div class="music-name van-ellipsis">{{item.title}}</div>
          </router-link>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import http from "@api/http";
import Title from "./Title.vue";

export default {
  created() {
    const url = `/api/v1/restserver/ting?method=baidu.ting.billboard.billList&type=${this.type}&size=${this.size}&offset=0`;
    console.log(url);

    http.get(url).then(res => {
      // 拿到数据
      // 将数据渲染出来
      this.list = res.song_list;
    });
  },
  data() {
    return {
      list: []
    };
  },
  components: {
    Title
  },
  // 定义组件的输入
  props: {
    title: {
      type: String,
      default: "音乐列表"
    },
    // musicList: {
    //   type: Array,
    //   default() {
    //     return [];
    //   }
    // },
    // 指定组件加载哪些数据
    type: {
      type: Number,
      default: 1
    },
    // 指定组件加载多少条数据
    size: {
      type: Number,
      default: 6
    }
  }
};
</script>

<style lang="less" scoped>
// vue为了解决样式冲突的问题

.music-list-container {
  padding: 10px;

  .music-list {
    padding: 10px 0;
  }

  .music-col {
    margin-bottom: 10px;
  }

  .music-cover {
    width: 100%;
  }

  .music-name {
    text-align: center;
  }
}
</style>